<template>
  <breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
	<div class="table-wrapped">
		<!-- 1. 内容 -->
		<div class="table-top">
			<!-- 1-1 搜索框 -->
			<div class="table-header">
				<div>
					<el-input v-model="account" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
						:prefix-icon="Search" @change="searchLoginAccount()" clearable @clear="getLoginFirstPageList" />
				</div>
				<div class="upload-wrapped">
					<el-button type="danger" @click="clearList">清空操作日志</el-button>
				</div>
			</div>
			<!-- 1-2 列表 -->
			<div class="table-content">
				<el-table :data='tableData' style="width: 100%;">
					<el-table-column type="index" width="50" :index="indexMethod"></el-table-column>
					<el-table-column prop="account" label="账号" />
					<el-table-column prop="name" label="名字" />
					<el-table-column prop="email" label="联系方式">
					</el-table-column>
					<el-table-column prop="login_time" label="登录时间" width="200">
						<template #default="{row}">
							<div>{{row.login_time?.slice(0,16)}}</div>
						</template>
					</el-table-column>

				</el-table>
			</div>
		</div>

		<!-- 2. 页码 -->
		<div class="table-footer">
			<el-pagination :page-size="1" :current-page="paginationData.loginCurrentPage" :pager-count="7" :total="paginationData.loginTotal" 
				:page-count="paginationData.loginPageCount" @current-change="loginCurrentChange" layout="prev, pager, next" />
		</div>
	</div>

	<tips ref="tip" @success='clearListToOne'></tips>
</template>
 
<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
	import breadCrumb from '@/components/bread_crumb.vue';
	import { Search } from '@element-plus/icons-vue';
	import { loginLogListLength, returnLoginListData, searchLoginLogList } from '@/api/log';
  import tips from './components/tips.vue';

  const breadcrumb = ref()
	const item = ref({
		first: '登录日志', 
	})

	const indexMethod = (index:number) => { // index从0开始 
	if(paginationData.loginCurrentPage===1){
			return index+1
		}else{
			return (paginationData.loginCurrentPage-1) * 10 + (index+1)
		}
	}

	// 登录次数表格数据
	const tableData = ref([])
	const account = ref()

	// 搜索函数
	const searchLoginAccount = async () => {
		const res = await searchLoginLogList(account.value)
		tableData.value = res.data
	}

	// 默认获取登录次数列表第一页的数据（清空搜索框）
	const getLoginFirstPageList = async () => {
		const res = await returnLoginListData(1)
		tableData.value = res.data
	}
	getLoginFirstPageList()

	const tip = ref()
	const clearList = () => {
		tip.value.open()
	}

	// clearList之后pagination要归1
	const clearListToOne = () => {
		getLoginFirstPageList()
		paginationData.loginCurrentPage = 1
		paginationData.loginPageCount = 1
		paginationData.loginTotal = 1
	}

	// -----------------------------------------------------------------------------------------------------------
	// 分页数据
	const paginationData = reactive({ 
		loginTotal: 1, // 登录次数总数 
		loginPageCount: 1, // 登录次数列表总页数 
		loginCurrentPage: 1, // 登录次数列表当前所处页数
	})

	// 获取登录次数列表的页数
	const getLoginListLength = async () => {
		const res = await loginLogListLength()
		paginationData.loginTotal = res.data.length
		paginationData.loginPageCount = Math.ceil(res.data.length / 10)
	}
	getLoginListLength()

	// 登录次数列表监听换页
	const loginCurrentChange = async (value: number) => {
		paginationData.loginCurrentPage = value
		const res = await returnLoginListData(paginationData.loginCurrentPage)
		tableData.value = res.data
	}

  
</script>
 
<style lang="scss" scoped>
	:deep(.el-table .cell) {
		font-weight: 400;
	}

	a {
		color: #fff;
		display: block;
		text-decoration: none;
	}
</style>
